const vm = new Vue({
    el: "#fabu",
    data: {
        fit: "fill", // 头像覆盖方式
        touxiang: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",   //头像
        tags: ['旅游', '音乐', '编程', '美食', "情感", "体育", "摸鱼", "健康", "摄影", "校园", "娱乐", "其它"],   // 分类
        tagList: [],    // 选择的分类
        file: null,    // 文章封面
        imageUrl: "",
        article: {
            aid: "",     // 文章id
            user_id: "",
            title: "",   // 文章标题
            content: "", //  文章内容
            tag_list: [],    // 文章分类列表
            zhaiyao: "", //文章摘要
        },
        cities: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        checkboxGroup1: [], // 分类选择
        divclass: "ptn1",    // 封面位置
        myquill1: null,   // 富文本编辑器1
        myquill2: null,   // 富文本编辑器2
        isFlipped: false, // 是否翻转（输入内容）
        textf: "当前：输入内容"
    },
    created() {
        this.getsD();
    },
    mounted() {
        this.createQuill();
    },
    methods: {
        // 翻转
        toggleFlip() {
            if (!this.isFlipped) {
                this.textf = "当前：输入摘要"
            } else {
                this.textf = "当前：输入内容"
            }
            this.isFlipped = !this.isFlipped;
        },
        // 富文本编辑器
        createQuill() {
            this.myquill1 = new Quill(this.$refs.content, {
                theme: "snow",   // 主题
                placeholder: '请输入文章内容...', // 占位文本

                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline'],
                        [{header: [1, 2]}],
                        ['blockquote', 'code-block', 'link'],
                        [{list: 'ordered'}, {list: 'bullet'}],
                        ['image'],
                        [{'size': []}],  // 添加字体大小下拉菜单
                    ]
                }

            })
            if (this.article.content !== "") {
                this.myquill1.root.innerHTML = this.article.content  // 插入先前写的内容
            }
            this.myquill1.root.innerHTML = this.article.content  // 插入先前写的内容
            this.myquill1.on("text-change",
                () => {
                    this.article.content = this.myquill1.root.innerHTML;
                }
            )
            this.myquill2 = new Quill(this.$refs.zhaiyao, {
                theme: "snow",   // 主题
                placeholder: '请输入文章摘要...', // 占位文本
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline'],
                        [{header: [1, 2]}],
                        ['blockquote', 'code-block', 'link'],
                        [{list: 'ordered'}, {list: 'bullet'}],
                        ['image'],
                        [{'size': []}],  // 添加字体大小下拉菜单
                    ]
                }
            })
            if (this.article.zhaiyao !== "") {
                this.myquill2.root.innerHTML = this.article.zhaiyao  // 插入先前写的内容
            }
            this.myquill2.on("text-change",
                () => {
                    this.article.zhaiyao = this.myquill2.root.innerHTML;
                }
            )
        },
        // 改变封面位置
        change_pt() {
            //如果在左边
            this.divclass = (this.divclass === "ptn1") ? "ptn2" : "ptn1";
        },
        // 是否是修改文章
        getsD() {
            const title = sessionStorage.getItem("art_title");
            // 如果有数据则是修改文章
            console.log(3);
            if (title) {
                this.article.title = title;
                this.article.aid = sessionStorage.getItem("art_aid");
                this.article.content = sessionStorage.getItem("art_content");
                this.article.zhaiyao = sessionStorage.getItem("art_zhaiyao");
                this.imageUrl = sessionStorage.getItem("art_img");
                this.isChange = true;
            }
        },
        to_home() {
            window.close()
        },
        fabu() {
            const that = this
            this.article.user_id = sessionStorage.getItem("user_id");
            for (let i = 0; i < this.tagList.length; i++) {
                this.article.tag_list.push(this.tags.indexOf(this.tagList[i]) + 1 + "")
            }
            this.article.tag_list = Array.from(new Set(this.article.tag_list));
            const formData = new FormData();
            formData.set("aid", this.article.aid)
            formData.set("photo", this.file);
            for (let key in this.article) {
                formData.set(key + "", this.article[key])
            }
            let url = "/article/add";
            if (this.isChange) {
                url = "/article/update";
            }
            axios({
                url: url,
                method: "post",
                data: formData
            }).then(
                (resp) => {
                    if (resp.data.statu) {
                        that.$notify({
                            type: "success",
                            message: "发布成功，等待管理员审核",
                            onClose: this.to_home,
                            duration: 1000
                        })
                        this.article = {
                            aid: "",     // 文章id
                            user_id: "",
                            title: "",   // 文章标题
                            content: "", //  文章内容
                            tag_list: [],    // 文章分类列表
                            zhaiyao: "", //文章摘要
                        }

                    }
                }
            )
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const allowedTypes = ['image/jpeg', 'image/png']; // 允许的图片格式
            const isAllowedType = allowedTypes.includes(file.type);
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isAllowedType) {
                this.$message.error('上传头像图片只能是JPEG或PNG格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            if (isAllowedType && isLt2M) {
                this.file = file
                return true;
            }
            return false;
        },
        TabFour(event) {
            if (event.key === 'Tab') {
                event.preventDefault();

                const input = event.target;
                const start = input.selectionStart;
                const end = input.selectionEnd;

                input.value = input.value.substring(0, start) + '    ' + input.value.substring(end);
                input.selectionStart = input.selectionEnd = start + 4;
            }

        }

    }
})
